{% extends "layout.html" %}

{% block title %}
    Home
{% endblock %}

{% block main %}
<div class="container">
    <img src="../static/images/home.svg" class="background" id="home">
    <h1>Home</h1>
    <table class="table table-hover table-md-responsive">
        <tr class="thead-light">
            <th scope="col">Stocks Owned</th>
            <th scope="col">Number of Shares</th>
            <th scope="col">Current Stock Price</th>
            <th scope="col">Total Value</th>
        </tr>
        {% for i in range(symbol_list_length) %}
        <tr>
            <td>{{ (symbol_list[i])['symbol'] }}</td>
            <td>{{ shares[i] }}</td>
            <td>${{ price[i] }}</td>
            <td>${{ total[i] }}</td>
        </tr>
        {% endfor %}
        <tr>
            <td></td>
            <td></td>
            <td><strong>Cash Balance:</strong></td>
            <td>{{ available }}</td>
         </tr>
         <tr>
             <td></td>
             <td></td>
             <td><strong>Stocks’ Cumulative Value Plus Cash:</strong></td>
            <td><strong>{{ grand_total }}</strong></td>
         </tr>
    </table>
</div>
{% endblock %}